<template>
	<div class="nav-wrap">
		<div class="search-wrap">
			<p>让AI提升师生创建3D内容的创造力</p>
			<div  class="search">
				<input type="text" ref="input1" v-model.trim="keyword" @keyup.13="search" placeholder="输入模型视频/用户名等名称探素优秀作品" />
				<div  @click.stop="search">
					<i class="iconfont icon-sousuo"></i>
				</div>
			</div>
			
			<div class="recommend">推荐词：
				<span v-for="(item,index) in hotSearch" :key="index" @click="recommend(item)">{{item}}</span>
			</div>
		</div>
		
		<ul>
			<li v-for="(item,index) in menuList" :key='item.url' @click.stop="changeTab(item,index)" :class="menuActive == index ? 'current' : ''">{{item.name}}</li>
		</ul>
	</div>
</template>
<script>
	import {
		hotSearch,
	} from '@/api/common.js';
	import utils from '@/assets/js/utils';
	export default {
		data() {
			return {
				menuList: [
					{name:"模型广场",url:"/model-square" },
					{name:"3D创作学堂",url:"/create-guide"},
					{name:"我要创作",url:"/create-model"},
					{name:"个人中心",url:"/my-work"},
				],
				isShowSearch:true,
				menuActive:0,
				hotSearch:[],
				keyword:"",
				token:""
			};
		},
		
		created() {
			this.token = utils.getSession('token');
			this.getHotSearch()
		},
		
		methods: {
			async getHotSearch(){
				const {
					data,
					status
				} = await hotSearch({});
				if (status !== 200) return;
				if(data.code == 200){
					this.hotSearch = data?.data?.info || [];
				}
				else{
					this.hotSearch = [];
				}
			},
			
			changeTab(item,index){
				if(!this.token){
					if(item.url == "/create-model" || item.url == "/my-work"){
						this.$message.warning("请先登录");
						this.$router.push("/login");
						return
					}
				}
			    this.menuActive = index;
				this.$router.push({
					path:item.url
				})
			},
			
			recommend(item){
				this.keyword = item;
			},
			
			search(){
				const path = this.$route?.path
				if(path != '/model-square'){
					this.$router.push({
						path:'/model-square'
					})
				}
				else{
					this.$emit("search",this.keyword);
				}
			}
		},
		
		watch:{
			$route:{
				handler:function(newV,oldV){
					const path = newV.path;
					this.menuActive = this.menuList.findIndex(ele => ele.url == path);
					this.isShowSearch = path == "/model-square" ? true :false
				},
				deep:true,
				immediate:true
			}
		}
	};
</script>
<style lang="scss" scoped>
	input::-webkit-input-placeholder {
		/* WebKit browsers 适配谷歌 */
		font-size: 12px;
		color: #999999;
	}
	
	input:-moz-placeholder {
		/* Mozilla Firefox 4 to 18 适配火狐 */
		font-size: 12px;
		color: #999999;
	}
	
	input::-moz-placeholder {
		/* Mozilla Firefox 19+ 适配火狐 */
		font-size: 12px;
		color: #999999;
	}
	
	input:-ms-input-placeholder {
		/* Internet Explorer 10+  适配ie*/
		font-size: 12px;
		color: #999999;
	}

	.nav-wrap{
		@include flex-row;
		justify-content: space-between;
		margin-bottom: 30px;
		.search-wrap{
			width: 32%;
			.search{
				@include flex-row;
				margin: 10px 0;
				input {
					flex:1;
					height: 40px;
					padding-left: 10px;
					background: #F0F3F4;
					font-size: 12px;
					border-radius: 5px 5px 5px 5px;
					outline: none;
				}
				div{
					@include cursor-style;
					width: 88px;
					height: 40px;
					margin-left: 10px;
					line-height: 40px;
					text-align: center;
					background: #FFC267;
					border-radius: 5px 5px 5px 5px;
					i{
						color: #fff;
						font-size: 20px;
					}
				}
			}
			p{
				font-size: 14px;
				color: #000000;
			}
			.recommend{
				@include cursor-style;
				font-size: 12px;
				color: #999999;
				span{
					padding-right: 5px;
				}
				span:not(:last-child)::after{
					content: "";
					height: 10px;
					padding-right: 5px;
					border-right: 1px solid #CCCCCC;
				}
			}
		}
		
		ul{
			width: 68%;
			@include flex-row;
			justify-content: flex-end;
			li{
				@include cursor-style;
				width: 22%;
				height: 60px;
				line-height: 60px;
				text-align: center;
				background: #FFF1DF;
				border-radius: 5px 5px 5px 5px;
				font-size: 16px;
				color: #FF8A00;
			}
			li:not(:last-child){
				margin-right: 10px;
			}
			.current{
				background: #FF8A00;
				color: #FFFFFF;
			}
		}
	}
</style>